<template>
  <div class="customer-container">
    <!-- 客户 -->
    <div class="customer-data">
      <div class="customer-top">
        <div class="cust_title">
          <div class="title">我的客户(个)</div>
          <div class="date">2023-08-26</div>
        </div>
        <div class="c-t-right">
          <div class="title">800</div>
          <div class="xjnum" style="padding-top: 25px;">
            <div @click="goInfo(1)">新进<span class="xjnumSpan"
                style="color: #55A722;background: rgba(85,167,34,0.2);">200</span></div>
            <div @click="goInfo(2)" style="margin-top: 10px;">移出<span class="xjnumSpan"
                style="background: rgba(236,79,79,0.2);color: #EC4F4F;">200</span></div>
          </div>
          <div class="contBody" style="padding-top: 20px;">
            <div class="contInfo" v-for="item in [1, 2, 3]" :key="item">
              <img src="@/assets/image/home/xjkh.png" alt="" class="contImg">
              <span style="margin-left: -35px;">上升</span>
              <span>60</span>
              <span>比上月</span>
            </div>
          </div>
        </div>
      </div>

      <div class="customer-bottom" style="margin-top: 45px;">
        <div class="bottom-item" @click="goInfo(3)" style="margin-left: 0px;">
          有贷户： <span class="xjnumSpan" style="color: #55A722;background: rgba(85,167,34,0.2);">200</span>
        </div>
        <div class="bottom-item" @click="goInfo(4)">
          无贷户： <span class="xjnumSpan" style="background: rgba(236,79,79,0.2);color: #EC4F4F;">200</span>
        </div>
        <div class="bottom-item" @click="goInfo(5)" style="width: 150px;">
          公司新增客户数： <span class="xjnumSpan" style="color: #55A722;background: rgba(85,167,34,0.2);">200</span>
        </div>
      </div>
    </div>
    <!-- 业绩 -->
    <div class="customer-data">
      <div class="customer-top">
        <div class="cust_title">
          <div class="title">我的业绩（万元）</div>
          <div class="date">2023-08-26</div>
        </div>
        <div class="c-t-right">
          <div class="title" style="width: 60%;">20,000.00</div>
          <div class="contBody">
            <div class="contInfo" v-for="item in [1, 2, 3, 4]" :key="item">
              <img src="@/assets/image/home/xjkh.png" alt="" class="contImg">
              <span style="margin-left: -35px;">上升</span>
              <span>60</span>
              <span>比上月</span>
            </div>
          </div>
        </div>
      </div>
      <div class="customer-bottom" style="margin-top: 35px;">
        <div class="index-tabbar">
          <div :class="['tabbarBody', taberFlag == 0 ? 'checkTaber' : '']"
            style="border-top-left-radius: 4px;border-bottom-left-radius: 4px;" @click="changeSelect(0)">存款</div>
          <div :class="['tabbarBody', taberFlag == 1 ? 'checkTaber' : '']" @click="changeSelect(1)">贷款</div>
          <div :class="['tabbarBody', taberFlag == 2 ? 'checkTaber' : '']" @click="changeSelect(2)">中间业务收入</div>
          <div :class="['tabbarBody', taberFlag == 3 ? 'checkTaber' : '']"
            style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;" @click="changeSelect(3)">创利</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabPosition: 'save',
      currentBar: '',
      taberFlag: 0,
    }
  },
  props: {
    publicType: {
      type: Number,
      default: 0
    },

  },
  methods: {
    // 切换Tabel
    changeSelect(val) {
      this.taberFlag = val
    },
    // 新进新出跳转
    goInfo(val) {
      switch (val) {
        case 1:
          // 新进
          this.$router.push('/myClient/newcustomerlist');
          break;
        case 2:
          // 移出
          this.$router.push('/myClient/movecustomerlist');
          break;
        case 3:
          // 有贷户
          this.$router.push('/myClient/loanUser');
          break;
        case 4:
          // 无贷户
          this.$router.push('/myClient/noLoanUser');
          break;
        case 5:
          // 公司新增客户数
          this.$router.push('/myClient/companyUser');
          break;
      }
    },
    onChange(val) {
      this.currentBar = val;
      console.log(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.customer-container {
  width: 100%;
  display: flex;

  .customer-data {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 50%;
    // height: 150px;
    padding: 10px 20px;
    border-radius: 8px;
    background-color: #FFFFFF;

    .customer-top {
      width: 98%;

      .cust_title {
        width: 100%;
        margin: 10px auto;
        display: flex;
        justify-content: space-between;

        .title {
          width: 50%;
          height: 16px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: bold;
          color: #262626;
          line-height: 16px;
        }

        .date {
          width: 40%;
          height: 16px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #5C5C5C;
          line-height: 16px;
          text-align: right;
        }
      }

      .c-t-right {
        width: 100%;
        display: flex;

        .title {
          width: 150px;
          height: 60px;
          font-size: 40px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #2E2E2E;
          line-height: 90px;
        }

        .xjnum {
          width: 100px;
          height: 50px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #5C5C5C;
          line-height: 20px;
          margin-top: 5px;

        }

        .xjnumSpan {
          margin-left: 10px;
          text-align: center;
          line-height: 20px;
          padding: 5px 8px;
          border-radius: 5px;
          cursor: pointer;
        }

        .contBody {
          width: 50%;
        }

        .contInfo {
          display: flex;
          justify-content: space-between;
          width: 100%;
          line-height: 25px;
        }

        .contImg {
          width: 20px;
          height: 20px;
          margin-top: 3px;
        }

      }
    }

    .customer-bottom {
      display: flex;
      flex-wrap: wrap;
      margin-top: 3px;

      .bottom-item {
        width: 100px;
        margin-left: 10px;
        cursor: pointer;
      }

      .xjnumSpan {
        text-align: center;
        line-height: 20px;
        padding: 5px 8px;
        border-radius: 5px;
      }
    }

    &+.customer-data {
      margin-left: 20px;
    }
  }

  .index-tabbar {
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .tabbarBody {
      width: 25%;
      height: 35px;
      background: #FFFFFF;
      border: 1px solid #5B73FF;
      text-align: center;
      line-height: 35px;
      text-align: center;
      cursor: pointer;
      font-weight: 400;
      color: #5B73FF;
    }

    .checkTaber {
      color: #FFFFFF;
      background: #5B73FF;
    }
  }
}
</style>
